<template>
    <view class="navbar-box" v-if="statusBarHeight && navBarHeight">
        <!-- 状态栏 -->
        <view :style="{ height: statusBarHeight + 'px' }"></view>
        <!-- 导航栏 -->
        <view :style="{ height: navBarHeight + 'px' }">
            <div class="navbar-default">
                <up-search placeholder="日照香炉生紫烟" :show-action="false"></up-search>
            </div>
        </view>
    </view>
    <!-- 占位 -->
    <view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
</template>
<script setup>
import { ref, onMounted, computed, watchEffect } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const props = defineProps([]);

onMounted(() => {
    geStatusBarHeight();
    getNavBarHeight();
});

let statusBarHeight = ref(0);
let navBarHeight = ref(0);

// 获取状态栏高度
function geStatusBarHeight() {
    statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
}
// 获取导航栏高度
function getNavBarHeight() {
    // #ifdef MP-WEIXIN
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 胶囊信息
    // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调
    navBarHeight.value =
        menuButtonInfo.height +
        (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 +
        2;
    // #endif
    // #ifdef APP-PLUS || H5
    navBarHeight.value = 44;
    // #endif
}

</script>

<style lang="scss" scoped>
.navbar-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    background: #fff;

    .navbar-default {
        height: 100%;
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>